<script setup lang="ts">

import CenterHeader from "@/views/center/centerHeader.vue";
import Left from "@/views/left/index.vue";
import Right from "@/views/right/index.vue";
</script>

<template>
  <div class="leftCon">
    <Left />
  </div>
  <div class="centerCon">
    <center-header></center-header>
    <!--        <img
              src="./assets/unity.png"
              style="width: 64vw; height: 95vh; margin-top: 5vh; position: absolute"
              alt=""
            />-->
    <!--        <iframe
                src="/public/WebGL/index.html"
                style="
                width: 64vw;
                height: 95vh;
                margin-top: 5vh;
                position: absolute;
                border: none;
              "
            ></iframe>-->
  </div>
  <!-- </el-container> -->
  <div class="rightCon">
    <Right/>
  </div>
</template>

<style scoped>
.leftCon {
  width: 18vw;
  height: 100vh;
  /* background: red; */
}

.leftHead .el-header {
  background-color: #b3c0d1;
  color: #333;
  height: 5vh;
  width: 20vw;
}

.leftCon .sidebar {
  width: 4vw;
  height: 95vh;
  /* background: #ebd50e; */
}

.leftCon .main-content {
  width: 14vw;
  height: 95vh;
  /* background: #21eb0e; */
}

.centerCon {
  width: 64vw;
  height: 100vh;
}

.rightCon {
  width: 18vw;
  height: 100vh;
  background: #1e2430;
}

.rightCon .el-header {
  /* background-color: #115bbb; */
  color: #333;
  height: 5vh;
  width: 18vw;
  padding: 0;
}

.rightCon .el-main {
  padding: 0;
  height: 95vh;
}

:deep .el-menu {
  border-right: 0 !important;
}
</style>